交易管理：审批流程状态展示（el-steps + 展开表格）
概述
当业务流程状态为单向流转且状态数量较多时，直接在表格列中展示当前状态会让用户无法感知整体流程进度。Element Plus 的 el-steps（步骤条）组件配合表格展开行，可以直观地展示审批流程的全貌与当前进度。
el-steps 组件介绍
el-steps 是 Element Plus 提供的步骤条组件，适用于分步骤展示流程进度。
基础用法
<template>
<el-steps :active="2" finish-status="success" process-status="process">
<el-step title="提交申请" />
<el-step title="初审" />
<el-step title="复审" />
<el-step title="审批通过" />
<el-step title="打款完成" />
</el-steps>
</template>
vue
状态类型
| 状态值 | 说明 | 视觉表现 |
|---|---|---|
wait | 等待中 | 灰色（未到达的步骤） |
process | 进行中 | 蓝色/黑色（当前步骤） |
finish | 已完成 | 绿色（已通过的步骤） |
error | 异常 | 红色（被拒绝等） |
success | 成功 | 绿色勾选 |
关键属性
| 属性 | 类型 | 说明 |
|---|---|---|
active | number | 当前激活的步骤索引（从 0 开始） |
finish-status | string | 已完成步骤的状态样式 |
process-status | string | 当前步骤的状态样式 |
direction | string | 方向：horizontal / vertical |
align-center | boolean | 居中对齐 |
实现方案：表格展开行 + 步骤条
在交易管理的"我的钱包"页面，将步骤条嵌入表格展开行中：
<template>
<el-table :data="withdrawList">
<!-- 常规列 -->
<el-table-column type="expand">
<template #default="{ row }">
<div style="padding: 20px 40px">
<el-steps
:active="getActiveStep(row.status)"
:process-status="getProcessStatus(row.status)"
finish-status="success"
>
<el-step title="提交申请" :description="row.applyTime" />
<el-step title="初审" :description="row.firstAuditTime || '待审核'" />
<el-step title="复审" :description="row.secondAuditTime || '待审核'" />
<el-step title="审批通过" />
<el-step title="打款完成" :description="row.transferTime" />
</el-steps>
</div>
</template>
</el-table-column>
<el-table-column prop="userName" label="用户" />
<el-table-column prop="amount" label="提现金额" />
<el-table-column prop="status" label="状态">
<template #default="{ row }">
<el-tag :type="statusTagMap[row.status]">
{{ statusTextMap[row.status] }}
</el-tag>
</template>
</el-table-column>
</el-table>
</template>
<script setup lang="ts">
const statusTextMap: Record<string, string> = {
pending: '待审核',
first_audit: '初审中',
second_audit: '复审中',
approved: '已通过',
rejected: '已拒绝',
transferred: '已打款',
}
const statusTagMap: Record<string, string> = {
pending: 'info',
first_audit: 'warning',
second_audit: 'warning',
approved: 'success',
rejected: 'danger',
transferred: 'success',
}
function getActiveStep(status: string): number {
const stepMap: Record<string, number> = {
pending: 0,
first_audit: 1,
second_audit: 2,
approved: 3,
transferred: 4,
}
return stepMap[status] ?? 0
}
function getProcessStatus(status: string): string {
return status === 'rejected' ? 'error' : 'process'
}
</script>
vue
状态流转图
提交申请(0) → 初审(1) → 复审(2) → 审批通过(3) → 打款完成(4)
│ │ │ │
└── wait └── wait └── wait └── finish
process process process process
异常路径：
提交申请 → 初审 → 复审 → [拒绝] (error状态)
text
实践要点
el-steps的active属性控制当前高亮步骤，finish-status控制已完成步骤的样式- 当流程被拒绝时，将
process-status设为error，当前步骤显示为红色 - 步骤条放在表格展开行中，不占用主表格空间，用户按需查看
description属性可展示时间戳，让用户了解每个步骤的执行时间- 表格主列保留简洁的状态 Tag，步骤条仅在展开时展示完整流程
↑